<template>
  <div class="map-container" id="map-container"></div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";
import { HomePosition, MapKey, SecurityKey } from "@/utils/constant";

declare global {
  interface Window {
    _AMapSecurityConfig: {
      securityJsCode: string;
    };
  }
}

let map: any;

let AMap: any;

onMounted(async () => {
  window._AMapSecurityConfig = {
    securityJsCode: SecurityKey,
  };
  try {
    AMap = await AMapLoader.load({
      key: MapKey, // Web端开发者Key
      version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: ["AMap.Scale", "AMap.MoveAnimation"], //需要使用的的插件列表
    });
    map = new AMap.Map("map-container", {
      // 设置地图容器id
      viewMode: "3D", // 是否为3D地图模式
      pitch: 50, //地图俯仰角度，有效范围 0 度- 83 度
      rotateEnable: true, //是否开启地图旋转交互 鼠标右键 + 鼠标画圈移动 或 键盘Ctrl + 鼠标左键画圈移动
      pitchEnable: true, //是否开启地图倾斜交互 鼠标右键 + 鼠标上下移动或键盘Ctrl + 鼠标左键上下移动
      zoom: 17, //初始化地图层级
      rotation: -15, //初始地图顺时针旋转的角度
      zooms: [2, 20], //地图显示的缩放级别范围
      center: HomePosition, // 初始化地图中心点位置
    });
  } catch (error) {
    console.error(" 🏞️ 地图加载失败！", error);
  }
});

onUnmounted(() => {
  map?.destroy();
});
</script>

<style scoped>
.map-container {
  width: 100%;
  height: 100%;
}
</style>
